<template>
  <div>
    <div class="header">
      <span style="cursor: pointer; position: absolute; padding: 10px;left:5px;font-size: 18px;font-weight: bold" onclick="history.go(-1)">返回</span>
      <div style="font-size: 26px;padding: 5px;">力沃社区使用说明</div>
    </div>
    <div style="padding: 4%;padding-top: 80px;">
    <ol>
      <li>力沃社区已接入钉钉微应用，所有成员都可以使用，该应用目前只适配电脑端钉钉客户端。
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-1.png"/></div>
      </li>
      <li>首页、公告、文库、讨论(所有员工)：该页面可以查看最新的文章。 <br>
        <p>公告、文库、讨论拥有栏目</p>
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-10.png"/></div>
        <p>可以根据发布时间来筛选文章</p>
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-2.png"/></div>
        <p>可以输入关键字来筛选文章</p>
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-3.png"/></div>
        <p>用户可以对文章进行收藏、点赞、转发</p>
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-4.png"/></div>
        <p>用户可以点击文章名称来打开文章详情</p>
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-5.png"/></div>
        <p>用户创建按钮创建文章</p>
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-6.png"/></div>
        <p>管理员可以对别人的文章进行删除</p>
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-16.png"/></div>
      </li>
      <li>文章详情(所有员工)：该页面来显示文章详情 <br>
        <p>用户可以点击相关按钮进行操作</p>
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-7.png"/></div>
        <p>用户可以在留言板进行留言， 可以主动@具体人员</p>
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-8.png"/></div>
        <p>留言用户可以对自己留言进行编辑或者删除</p>
        <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-9.png"/></div>
      </li>
      <li>我的(所有员工)：该页面来展示用户自己的文章，可以对文章进行各种操作 <br>
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-11.png"/></div>
      </li>
      <li>文章编辑器(所有员工)：用户用来创建编辑文章。 <br>
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-15.png"/></div>
      </li>
      <li>收藏(所有员工)：该页面用来存放用户收藏的文章 <br>
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-12.png"/></div>
      </li>
      <li>设置(管理员)：添加、查询、编辑、删除栏目 <br>
          <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-13.png"/></div>
          <p>管理员可以设置版块管理员、栏目管理员、栏目发布人、栏目订阅人</p>
        <div><img src="https://livolo-office.oss-cn-hangzhou.aliyuncs.com/help/bbs-help-14.png"/></div>
      </li>
    </ol>
    </div>
  </div>
</template>
<style lang="scss" scoped>
    html, body{margin: 0; padding: 0; }
    ol{list-style-type:none;counter-reset:sectioncounter; font-size: 15px; padding: 0px; margin: 0;}
    li{
      margin-bottom: 20px;
    }
    ol li:before {
      content:counter(sectioncounter) "、";
      counter-increment:sectioncounter;
    }
    img{
      max-width: 100%;
      margin: 0 auto;
      -webkit-filter: drop-shadow(3px 3px 3px gray); /* Chrome, Safari, Opera */
      filter: drop-shadow(3px 3px 3px gray);
    }
    div{
      padding: 15px;
    }
    .header{
      text-align: center; background: black; height: 45px; position: fixed; color: white; padding: 5px;top:0;width: 100%; z-index: 9;
    }
    li{
      font-size:18px;
      font-weight: bold;
    }
    li>p{
      /* text-align: center; */
      font-weight: normal;
      font-size:14px;
      padding-left:20px;
    }
</style>